<template>
    <div class="add-enterprise">
      <header class="add-header">
        <div class="left">
          <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
          <span>|</span>
          <span> {{ $route.query.id ? '编辑企业' : '新增企业' }}</span>
          <!-- <span>添加企业</span> -->
        </div>
        <div class="right">
          黑马程序员
        </div>
      </header>
      <main class="add-main">
        <div class="form-container">
          <div class="title">企业信息</div>
          <div class="form">
            <el-form ref="ruleForm" label-width="100px">
              <el-form-item label="企业名称" prop="name">
                <el-input v-model="addForm.name" />
              </el-form-item>
              <el-form-item label="法人" prop="name">
                <el-input v-model="addForm.legalPerson" />
              </el-form-item>
              <el-form-item label="注册地址" prop="name">
                <el-input v-model="addForm.registeredAddress" />
              </el-form-item>
              <el-form-item label="所在行业" prop="name">
                <el-select v-model="addForm.industryCode">
                    <!-- <el-option label="教育" :value="jaioyu" />
                         <el-option label="电商" :value="dianshang" /> -->
                    <el-option v-for="item in industryList" :key="item.industryCode" :label="item.industryName" :value="item.industryCode" />
                </el-select>
              </el-form-item>

              <el-form-item label="企业联系人" prop="name">
                <el-input v-model="addForm.contact" />
              </el-form-item>

              <el-form-item label="联系电话" prop="name">
                <el-input v-model="addForm.contactNumber" />
              </el-form-item>

              <el-form-item label="营业执照" prop="name" >
              <!-- 上传组件 -->
              <!-- action 指定自动上传的服务器为# 但是我们要手动上传 -->

              <!-- <http-request 覆盖默认的上传行为，可以自定义上传的实现 -->
                <!-- before-upload 检验文件是否符合 
                                   return ture 则上传 继续执行fn
                                    return false 则不上传 不执行fn-->
              <el-upload action="#" :http-request="fn" :before-upload="fn2" >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              </el-form-item>

            </el-form>
          </div>
        </div>
      </main>
      <footer class="add-footer">
        <div class="btn-container">
          <el-button @click="clear">重置</el-button>
          <el-button type="primary" @click="submit" >确定</el-button>
        </div>
      </footer>
    </div>
  </template>
  
  <script>
  import { getIndustryListAPI, uploadAPI, addEnterpriseAPI, getEnterpriseDetailAPI, editEnterpriseAPI} from '@/api/enterprise';

  export default {
    data() {
        return {
            addForm: {
                name: '', // 企业名称
                legalPerson: '', // 法人
                registeredAddress: '', // 注册地址
                industryCode: '', // 所在行业
                contact: '', // 企业联系人
                contactNumber: '', // 联系人电话
                businessLicenseUrl: '', // 营业执照url
                businessLicenseId: '' // 营业执照id
            },
            industryList: []
        }
    },

    mounted() {
        this.getIndustryList()
        if(this.$route.query.id){
            //进入页面是为了编辑 => 请求详细信息 回显页面
            getEnterpriseDetailAPI(this.$route.query.id).then((res) => {
                console.log(res)
                this.addForm.name = res.data.name
                this.addForm.legalPerson = res.data.legalPerson
                this.addForm.registeredAddress = res.data.registeredAddress
                this.addForm.industryCode = res.data.industryCode
                this.addForm.contact = res.data.contact
                this.addForm.contactNumber = res.data.contactNumber
                this.addForm.businessLicenseUrl = res.data.businessLicenseUrl
                this.addForm.businessLicenseId = res.data.businessLicenseId
                //还有编辑时使用的id！
                this.addForm.id = res.data.id
                
            })

        }

    },


    methods: {

        clear(){
            this.addForm={
                name: '', // 企业名称
                legalPerson: '', // 法人
                registeredAddress: '', // 注册地址
                industryCode: '', // 所在行业
                contact: '', // 企业联系人
                contactNumber: '', // 联系人电话
                businessLicenseUrl: '', // 营业执照url
                businessLicenseId: '' // 营业执照id
            }
        },
        submit(){
            if(this.$route.query.id){
                //编辑
                editEnterpriseAPI(this.addForm).then(() =>{
                    this.$message.success('编辑成功')
                    this.$router.push('/park/enterprise')
                })
            }else{
                //新增
                addEnterpriseAPI(this.addForm).then(() =>{
                this.$message.success('添加成功')
                this.$router.push('/park/enterprise')
            })
            }

        },

        fn(obj){
            // obj.file才是上传的文件
            console.log('要上传了', obj.file)
            const fd = new FormData()
            fd.append('type', 'businessLicense')
            fd.append('file', obj.file)
            uploadAPI(fd).then((res) => {
                console.log('上传成功')
                this.addForm.businessLicenseId=res.data.id
                this.addForm.businessLicenseUrl=res.data.url
            })


        },
        fn2(file){
            console.log('检查', file)
            return file.size / 1024 / 1024  < 5
        },

        getIndustryList() {
            getIndustryListAPI().then((res) => {
                // console.log('here is api')
                this.industryList = res.data
            })
        }

    }
  }
  </script>
  
  <style scoped lang="scss">
  .add-enterprise {
    background-color: #f4f6f8;
    height: 100vh;
  
    .add-header {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      height: 64px;
      line-height: 64px;
      font-size: 16px;
      font-weight: bold;
      background-color: #fff;
  
      .left {
        span {
          margin-right: 4px;
        }
        .arrow{
          cursor: pointer;
        }
      }
  
      .right {
        text-align: right;
      }
    }
  
    .add-main {
      background: #f4f6f8;
      padding: 20px 130px;
  
      .form-container {
        background-color: #fff;
        .title {
          height: 60px;
          line-height: 60px;
          padding-left:20px;
        }
        .form {
          margin-bottom: 20px;
          padding: 20px 65px 24px;
          .el-form{
            display: flex;
            flex-wrap: wrap;
            .el-form-item{
              width: 50%;
            }
          }
        }
      }
    }
  
    .add-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 24px 50px;
      color: #000000d9;
      font-size: 14px;
      background: #fff;
      text-align: center;
    }
  }
  </style>